<template name="college">
	<view class="bgf5">
		<!-- <scroll-view scroll-y="true" class="pages"> -->
		<view class="topbg">
			<!-- <navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
					path="/pages/goods/detail?id=1309053880153" extra-data="" version="release">打开绑定的小程序</navigator> -->
			<view class="searchStyle" @tap="navSearch" >
				<u-search bg-color="#fff" v-model="searchValue" shape="round" :clearabled="true" :show-action="false"
					:disabled="true" input-align="left"></u-search>
				<!-- </u-sticky> -->
			</view>
			<view class="swiperView">
				<swiper style="height: 250upx;" :circular="true" :indicator-dots="true" :autoplay="true">
					<block v-for="(item,idx) in swiperList" :key="idx">
						<swiper-item>
							<image v-show="item.carouselType ==1||item.carouselType ==2" @tap.stop="navEnbeddeed(item)"
								style="width: 100%;height: 100%;border-radius: 33upx;" :src="item.carouselImage"
								mode="scaleToFill"></image>
							<navigator style="width: 100%;height: 100%;" v-show="item.carouselType ==3" target="miniProgram" open-type="navigate"
								:app-id="shopAppId" :path="item.carouselUrl" extra-data="" :version="version"
								hover-class="backgroudnone">
								<image style="width: 100%;height: 100%;border-radius: 33upx;" :src="item.carouselImage"
									mode="scaleToFill"></image>
							</navigator>

						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<view class="pledge">
			<view class="weui-flex">
				<view class="weui-flex__item">
					<view class="placeholder">
						<text class="pseudo1">科学严选</text>
					</view>
				</view>
				<view class="weui-flex__item">
					<view class="placeholder">
						<text class="pseudo2">正品保证</text>
					</view>
				</view>
				<view class="weui-flex__item">
					<view class="placeholder">
						<text class="pseudo3">售后无忧</text>
					</view>
				</view>
			</view>
		</view>
		<view class="weui-flex getview">
			<view v-for="(item,index) in groupingList" :key="index"
				:class="index == 1||index == 2?'weui-flex__item':''">
				<navigator target="miniProgram" open-type="navigate" :app-id="shopAppId" :path="item.skipUrl"
					extra-data="" :version="version" hover-class="hoverbgfff">
					<view class="placeholder" :class="index != 1&&index != 2?'placeholderw':''">
						<image class="getImage ellipsis" :src="item.imageUrl"></image>
						{{item.title}}
					</view>
				</navigator>
			</view>
		</view>
		<!-- 百货推荐 -->
		<view class="commodity" v-for="(item,index) in groupingList" :key="index">
			<navigator target="miniProgram" open-type="navigate" :app-id="shopAppId" :path="item.skipUrl"
				extra-data="" :version="version" hover-class="hoverbgfff">
				<image class="commodityImg" :src="item.bigImageUrl"></image>
			</navigator>
			<scroll-view scroll-x="true" class="scrollViews">
				<block v-for="(items,idx) in item.result" :key="idx">
					<view class="scrollView-a" @tap.stop="userSwc(item,idx)">
						<navigator target="miniProgram" open-type="navigate" :app-id="shopAppId"
							:path="items.detailUrl" extra-data="" :version="version" hover-class="hoverbgfff">
							<image class="scrollImage" :src="items.goodsImageUrl"></image>
							<view class="scrollTitle ellipsis">
								{{items.title}}
							</view>
							<view class="scrollMoney">
								¥{{items.salePrice}}
							</view>
							<view class="scrollSell">
								已售{{items.salesNum}}
							</view>
						</navigator>
					</view>
				</block>
				<view style="width: 90rpx;display: inline-block;">
				</view>
			</scroll-view>
		</view>
		<view style="height: 60upx;">
		</view>
		<!-- end -->
		<!-- </scroll-view> -->
		<u-popup v-model="addFamily" mode="top" border-radius="14">
			<view class="popuphide" @click="addFamily=false">
			</view>
			<view class="couponView" @tap="receiveCoupon">
				<view class="coupon-mn">
					￥<text class="coupon-text">10</text>
				</view>
				<view class="coupon-time">
					使用期限：{{thistime}}-{{endtime}}
				</view>
				<view class="coupon-quanx">
					无门槛
				</view>
			</view>
			<!-- <image @tap.stop="couponTap" class="discountcoupon10"
				src="http://static.bsyjk.cn/youhuiq/6DF08F150DAE41DEAC39F819FD173431.png" mode="优惠券"></image> -->
		</u-popup>
		<!-- 健康豆 -->
		<view class="accomplish-popup" v-show="accomplish">
			完成任务 <image class="jkdimage" src="http://static.bsyjk.cn/fitness/37914A67E286429B99EF67FDE1D3F192.png"
				mode="健康豆"></image>
			+{{bean}}
		</view>
	</view>
</template>
<script>

import uSearch from "@/uview-ui/components/u-search/u-search.vue"

import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"

	export default {
		components: {
			uSearch,
			uPopup,

		},
		data() {
			return {
				accomplish: false,
				bean: 1,
				thistime: this.$basejs.thisdayFormat2(false).replace(/-/g, "."), //当前时间
				endtime: this.$basejs.getDateStr(7).replace(/-/g, "."), //优惠截止时间
				groupingList: [], //分组列表
				addFamily: false, //新人优惠券
				Suctionscreen: false,
				background: {
					background: 'url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png) no-repeat',
					backgroundSize: 'cover',
				},
				commodityList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '固体蛋白饮料',
						money: 378,
						sell: 20
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '固体蛋白饮料',
						money: 378,
						sell: 20
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '固体蛋白饮料',
						money: 378,
						sell: 20
					}
				],
				searchValue: '',
				swiperList: [],
				title: false,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: false,
                version:'release',
                shopAppId:'wxeb719b5bc850729e'
			}
		},
        onTabItemTap(item){
           console.log(item,'item')
           this.goBsyShop();
        },
		onLoad() {
            //跳转到商城的首页
           this.goBsyShop();
            //新用户首次进入商城弹出新人优惠券
            if (global.token != '') {
                this.couponTap() //新人优惠券弹窗
            }
            uni.$on('collegeTask', this.collegeTask)

		},
		onShow() {
            this.goBsyShop();
            this.shopAppId = global.IS_BSY_SHOP?'wx3cc80cbbb6a3b5f9':'wxeb719b5bc850729e';
            this.version = global.IS_DEV?'trial':'release';
			this.getMapLocation();
			this.terminal({
				keyword: '',
				pageCurrent: '',
				pageSize: '',
				position: 2,
				terminalType: 1
			})
			this.getClassifyList()
		},
		onUnload() {
			uni.$off('collegeTask', this.collegeTask)
		},
		onPullDownRefresh() { //下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			if (global.token != '') {
				this.couponTap() //新人优惠券弹窗
			}
			this.getMapLocation();
			this.terminal({
				keyword: '',
				pageCurrent: '',
				pageSize: '',
				position: 2,
				terminalType: 1
			})
			this.getClassifyList()
		},

		methods: {
            //跳转的商城小程序
            goBsyShop(){
                if(global.IS_BSY_SHOP){
                    wx.navigateToMiniProgram({
                        appId: 'wx3cc80cbbb6a3b5f9',
                        path: 'pages/home/home',
                        envVersion: global.IS_DEV?'trial':'release',
                        fail: function(res) {
                          console.info(res,"res取消")
                          // wx.reLaunch({url: "/pages/tab/home"});//选择取消后，relaunch 到首页，否则会显示空白页面
                            wx.navigateBack({
                              delta : 1,
                            })
                        }
                    });
                }
            },
			// 跳转内嵌页
			navEnbeddeed(item) {
				uni.navigateTo({
					url:'/pages/embedded/embedded?src='+item.carouselUrl
				})
			},
			// 用户完成逛商城
			collegeTask() {
				let _this = this;
				_this.accomplish = true;
				setTimeout(() => {
					_this.accomplish = false
				}, 3000)
			},
			// 领取优惠券
			receiveCoupon() {
				let _this = this;
				let fdata = {
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				}
				this.$shopnew.post(global.apiUrls.receiveCoupon, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							_this.addFamily = false;
							uni.showToast({
								title: '领取成功',
								duration: 2000
							});
						}else{
							_this.addFamily = false;
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {
						_this.addFamily = false;
					})
			},
			//优惠券领取
			couponTap(e) {
				this.$basejs.globaltoken() //是否登录
				this.checkCouponUp() //判断优惠券可领取
			},
			// 校验优惠券是否被领取过
			checkCouponUp() {
				let _this = this;
				this.$shopnew.get(global.apiUrls.checkCouponUp + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.result == false) { //false  未领取
							_this.addFamily = true;
						}
					}).catch(err => {})
			},
			getListByClassifyId(classifyId, index) {
				let _this = this;
				this.$shopnew.get(global.apiUrls.getListByClassifyId + '?classifyId=' + classifyId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							let groupinIndex = _this.groupingList[index];
							groupinIndex.result = result
							_this.$set(_this.groupingList, index, groupinIndex)
						}
					}).catch(err => {})
			},
			// 获取分组列表
			getClassifyList() {
				uni.showLoading({
					title: '加载中',
					duration: 2000
				});
				let _this = this;
				this.$shopnew.get(global.apiUrls.getClassifyList, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							for (let i = 0; i < result.length; i++) {
								_this.getListByClassifyId(result[i].classifyId, i)
							}
							_this.groupingList = result;
							uni.hideToast(); //隐藏
						}
					}).catch(err => {})
			},
			terminal(data) {
				let _this = this;
				this.$api.post(global.apiUrls.terminal, data)
					.then(res => {
						let records = res.data.result.records;
						_this.swiperList = records;
					}).catch(err => {})
			},
			navSearch() {
				this.$basejs.globaltoken()
				uni.navigateTo({
					url: '/pages/subpackage/store/search/search'
				})


			},
			getMapLocation() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	}
				// });
			},
			fixed() {
				this.Suctionscreen = true;

			},
			unfixed() {
				this.Suctionscreen = false;

			}
		}
	}
</script>

<style lang="scss">
	.backgroudnone{
		background: none;
	}
	// 健康豆
	.accomplish-popup {
		display: inline-block;
		width: 345upx;
		height: 90upx;
		background: #3A3A3A;
		border-radius: 15upx;
		opacity: 0.9;
		position: fixed;
		top: 50vh;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		font-size: 28upx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 90upx;
		letter-spacing: 1px;
		text-align: center;

		.jkdimage {
			width: 44upx;
			height: 36upx;
		}
	}

	// end
	.hoverbgfff {
		background: #fff;
	}

	/deep/.u-drawer-top {
		background: none !important;
		text-align: center;
	}

	.couponView {
		width: 619upx;
		height: 754upx;
		margin: 40upx auto 0;
		background: url(http://static.bsyjk.cn/youhuiq/6DF08F150DAE41DEAC39F819FD173431.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		text-align: center;

		.coupon-mn {
			width: 619upx;
			position: absolute;
			font-size: 36upx;
			font-weight: 500;
			color: #FF333A;
			line-height: 50px;
			top: 325upx;

			.coupon-text {
				font-size: 90upx;
			}
		}

		.coupon-time {
			width: 100%;
			font-size: 20upx;
			font-weight: 400;
			color: #FF333A;
			line-height: 27px;
			position: absolute;
			top: 443upx;
		}

		.coupon-quanx {
			width: 100%;
			font-size: 36upx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50upx;
			position: absolute;
			top: 553upx;
		}
	}

	.popuphide {
		width: 78upx;
		height: 78upx;
		position: relative;
		margin: 270upx auto 0upx;
		left: 270upx;
		background: url(https://bsyjk-pic.bsyjk.cn/hideImage/567C9D30D6A64C72939CB0CBE51E4D84.png)no-repeat;
		background-size: 78upx 78upx;
	}

	.commodity {
		width: 706upx;
		height: 594upx;
		margin: 30upx auto 0;
		background: #FFFFFF;
		border-radius: 25upx;
		padding-top: 2upx;

		.commodityImg {
			display: block;
			width: 653upx;
			height: 200upx;
			background: #CCCCCC;
			border-radius: 16upx;
			margin: 28upx auto;
		}
	}

	.getview {
		width: 706upx;
		height: 188upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 20upx auto 0;
		font-size: 24upx;
		font-weight: 400;
		color: #4A4A4A;
		line-height: 33upx;

		.placeholderw {
			width: 160upx;
		}

		.getImage {
			width: 86upx;
			height: 86upx;
			display: block;
			// background: pink;
			margin: 33upx auto 13upx;
		}

		text-align: center;
	}

	.topbg {
		width: 750upx;
		height: 493upx;
		background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png)no-repeat;
		background-size: 750upx 493upx;
		padding-top: 28upx;
		box-sizing: border-box;
		position: relative;

		.location {
			height: 42upx;
			font-size: 30upx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42upx;
			padding: 0 26upx;

			.textbf {
				position: relative;
			}

			.textbf:before {
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				top: 10upx;
				right: -50upx;
				border-top: 20upx solid #fff;
				border-left: 20upx solid transparent;
				border-right: 20upx solid transparent;
			}
		}

		.searchStyle {
			width: 696upx;
			margin: 135upx auto -30upx;
		}

		.swiperView {
			width: 700upx;
			height: 290upx;
			position: absolute;
			left: 50%;
			bottom: -88upx;
			transform: translateX(-50%);
		}
	}

	.pledge {
		width: 600upx;
		height: 34upx;
		margin: 82upx auto 0;
		font-size: 24upx;
		font-weight: 400;
		color: #2EA7E0;
		line-height: 34upx;
		text-indent: 50upx;

		.pseudo1,
		.pseudo2,
		.pseudo3 {
			position: relative;
		}

		.pseudo1:before {
			content: '';
			width: 32upx;
			height: 32upx;
			position: absolute;
			top: 0;
			left: -44upx;
			background: url(https://pics.leshiguang.com/vpage/2024/01/11/27fd054d48234faf83531a737d1ec3f4.png)no-repeat;
			background-size: 32upx 32upx;
		}

		.pseudo2:before {
			content: '';
			width: 32upx;
			height: 32upx;
			position: absolute;
			top: 0;
			left: -44upx;
			background: url(https://pics.leshiguang.com/vpage/2024/01/11/19bd5d059ecf46bab1f442b50bf2f14d.png)no-repeat;
			background-size: 32upx 32upx;
		}

		.pseudo3:before {
			content: '';
			width: 32upx;
			height: 32upx;
			position: absolute;
			top: 0;
			left: -44upx;
			background: url(https://pics.leshiguang.com/vpage/2024/01/11/410cf83399ee45c69d29cb753ae17462.png)no-repeat;
			background-size: 32upx 32upx;
		}
	}

	.scrollViews {
		white-space: nowrap;
		display: flex;

		.scrollView-a {
			width: 208upx;
			height: 306upx;
			display: inline-block;
			margin-left: 30upx;
			text-align: center;

			.scrollImage {
				width: 208upx;
				height: 160upx;
				border-radius: 10upx;
			}

			.scrollTitle {
				font-size: 30upx;
				font-weight: 500;
				color: #333333;
				line-height: 42upx;
			}

			.scrollMoney {
				font-size: 36upx;
				font-weight: 500;
				color: #FF3B30;
				line-height: 50upx;
			}

			.scrollSell {
				font-size: 26upx;
				font-weight: 400;
				color: #999999;
				line-height: 37upx;
			}
		}
	}
</style>
